import type { ToDoItemType } from "../../types";
import styles from "./style.module.css";
interface PropsType {
  title: string;
  data: ToDoItemType[];
  handleSwitchState: (id: number) => void;
  handleDeleteClick: (id: number) => void;
}

const DoList: React.FC<PropsType> = ({
  title,
  data,
  handleDeleteClick,
  handleSwitchState,
}) => {
  const isCompleted = title === "已完成事项";

  return (
    <div>
      <div className={styles.section}>
        <h3
          className={
            isCompleted ? styles.sectionTitleCompleted : styles.sectionTitle
          }
        >
          {title} ({data.length})
        </h3>
        <ul className={styles.todoList}>
          {data.map((v) => {
            return (
              <li
                key={v.id}
                className={
                  isCompleted ? styles.todoItemCompleted : styles.todoItem
                }
              >
                <input
                  type="checkbox"
                  checked={v.completed}
                  onChange={() => handleSwitchState(v.id)}
                  className={styles.checkbox}
                />
                <span
                  className={
                    isCompleted ? styles.todoTextCompleted : styles.todoText
                  }
                >
                  {v.title}
                </span>
                <button
                  onClick={() => handleDeleteClick(v.id)}
                  className={styles.deleteButton}
                >
                  删除
                </button>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};

export default DoList;
